<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Canvas</title>

    <!--[if lt IE 9]>
      <script src="js/fabric/lib/excanvas.js"></script>
    <![endif]-->

    <script type="text/javascript" src="js/fabric/fabric.js"></script>
    <script type="text/javascript">
        function test() {
            // create a wrapper around native canvas element (with id="c")
            var canvas = new fabric.Canvas('c');

            // create a rectangle object
            var rect = new fabric.Rect({
                left: 100,
                top: 100,
                fill: 'red',
                width: 20,
                height: 20
            });

            // "add" rectangle onto canvas
            canvas.add(rect);
        }

        window.onload = test;
    </script>
</head>
<body>
    <canvas id="c" style="border:1px solid #c3c3c3;"></canvas>
</body>
</html>